<style include="shortcut-customization-shared">
  #container {
    align-items: center;
    display: grid;
    grid-auto-rows: minmax(52px, auto);
    grid-template-columns: minmax(min-content, 286px) 50%;
  }

  accelerator-view,
  text-accelerator {
    grid-column-start: 2;
    /* TODO(longbowei): Update value based on the input from PM/UX */
    line-height: 3.2;
    margin-inline-start: 24px;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  accelerator-view:not(:first-of-type) {
    border-top: var(--cr-separator-line);
  }

  #descriptionText {
    align-items: center;
    color: var(--cros-text-color-primary);
    display: flex;
    font: var(--cros-body-2-font);
  }
</style>

<div id="container">
  <div id="descriptionText">[[description]]</div>
  <template is="dom-if" if="[[isDefaultLayout(layoutStyle)]]">
    <template is="dom-repeat" items="[[acceleratorInfos]]">
      <accelerator-view class="accelerator-item" accelerator-info="[[item]]"
          action="[[action]]" source="[[source]]" source-is-locked="[[isLocked]]">
      </accelerator-view>
    </template>
  </template>
  <template is="dom-if" if="[[isTextLayout(layoutStyle)]]">
    <text-accelerator parts="[[getTextAcceleratorParts(acceleratorInfos)]]">
    </text-accelerator>
  </template>
</div>